<script setup lang="ts">
import { ref, defineProps, computed } from 'vue'

const { tableThs, tableTrs, widthList, tableWidth } = defineProps({
  tableThs: {
    type: [Array, String],
    default: () => {
      return ['保研率', '保研率2']
    },
  },
  tableTrs: {
    type: [Array, String],
    default: () => {
      return [{ name: '2023', data: ['50%', '50%'] }]
    },
  },
  widthList: {
    type: Array,
    default: () => {
      return [1, 2, 2]
    },
  },
  tableWidth: {
    type: [Number],
    default: () => {
      return 680
    },
  },
})

// table
// const thStart = ref(0)
const thStartX = ref(0)
const listWidth = ref(375)
const scrollLeft1 = ref(0)
const scrollLeft2 = ref(0)

const itemWidth = computed(() => {
  return tableWidth / itemNum.value
})

const itemNum = computed<number>(() => {
  return widthList.reduce((acc, current) => ((acc as number) + (current as number)) as number, 0) as number
})
const thMove = (e) => {
  let x = e[0][0]
  x *= -1
  x += thStartX.value
  if (x <= 0) {
    return
  }
  if (x > listWidth.value) {
    return
  }
  scrollLeft2.value = x
}
const scroll = (e) => {
  scrollLeft1.value = e.detail.scrollLeft
}
</script>

<template>
  <view class="wh100p">
    <view class="w100p" style="min-height: 300rpx">
      <scroll-view
        class="gui-scroll-x flex-center"
        :scroll-left="scrollLeft2"
        scroll-x
        scroll-y
        style="width: 700rpx; height: 100%"
        @scroll="scroll"
      >
        <view class="flex-column border-1" style="" :style="{ width: itemWidth * itemNum + 'rpx' }">
          <view class="flex table-head border-b-1" style="">
            <view style="left: 0; background-color: white; z-index: 3" :style="`width:${widthList[0] * itemWidth}rpx`">
              <text
                class="gui-data-tb-text gui-primary-text gui-border-b border-r-1"
                style=""
                :style="`width:${widthList[0] * itemWidth}rpx`"
              >
                年份
              </text>
            </view>
            <view v-for="(td, tdidx) in tableThs" :key="tdidx" class="gui-flex gui-row gui-nowrap">
              <text
                class="gui-data-tb-text gui-border-b gui-primary-text w100p border-r-1"
                style=""
                :style="`width:${widthList[tdidx + 1] * itemWidth}rpx;${tdidx == tableThs.length - 1 ? 'border-right:none' : ''}`"
              >
                {{ td }}
              </text>
            </view>
          </view>

          <view class="flex table-body">
            <view class="" style="left: 0; background-color: white; z-index: 3">
              <text
                v-for="(item, index) in tableTrs"
                :key="index"
                class="gui-data-tb-text gui-primary-text gui-border-b border-r-1"
                style="overflow: scroll"
                :style="`width:${widthList[0] * itemWidth}rpx`"
              >
                {{ item.name }}
              </text>
            </view>
            <view v-for="(item, index) in tableTrs" :key="index" class="gui-flex gui-row gui-nowrap">
              <text
                v-for="(td, tdidx) in item.data"
                :key="tdidx"
                class="gui-data-tb-text gui-border-b gui-primary-text border-r-1"
                style="overflow: scroll"
                :style="`width:${widthList[tdidx + 1] * itemWidth}rpx;${tdidx == tableThs.length - 1 ? 'border-right:none' : ''}`"
              >
                {{ td }}
              </text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped>
.college-img {
  width: 100%;
  height: 300rpx;
  background-color: aqua;
}

.college-logo-box {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
}

.college-logo-box image {
  width: 120rpx;
  height: 120rpx;
  background-color: aliceblue;
  border-radius: 50%;
}

.recruit-pageList .title {
  width: 100%;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #edefe9;
}

.recruit-pageList .item-list {
  width: 100%;
  padding: 15rpx;
  border-bottom: 3rpx solid #edefe9;
}

.gui-data-tb {
  width: 750rpx;
}

.gui-data-tb-l {
  /* width: 200rpx; */
  overflow: hidden;
}

.gui-data-tb-text {
  /* width: 200rpx; */
  font-size: 26rpx;
  line-height: 50rpx;
  height: 90rpx;
  overflow: hidden;
  padding: 20rpx 10rpx;
  display: block;
  box-sizing: border-box;
  text-align: center;
}

.gui-data-tb-r {
  width: 550rpx !important;
  overflow: hidden;
}

.border-1 {
  border: 1rpx solid;
}

.border-b-1 {
  border-bottom: 1rpx solid;
}

.border-r-1 {
  border-right: 1rpx solid;
}
</style>
